<%= render DS::Dialog.new(variant: "drawer") do |dialog| %>
  <% dialog.with_header do %>
    <div class="space-y-1">
      <div class="flex items-center gap-4">
        <h3 class="font-medium">
          <span class="text-2xl">
            <%= format_money @transfer.amount_abs %>
          </span>

          <span class="text-lg text-secondary">
            <%= @transfer.amount_abs.currency.iso_code %>
          </span>
        </h3>

        <%= icon "arrow-left-right", size: "sm" %>
      </div>

      <span class="text-sm text-secondary">
        <%= @transfer.name %>
      </span>
    </div>
  <% end %>

  <% dialog.with_body do %>
    <% dialog.with_section(title: t(".overview"), open: true) do %>
      <div class="pb-4 px-3 pt-2 text-sm space-y-3 text-primary">
        <div class="space-y-3">
          <dl class="flex items-center gap-2 justify-between">
            <dt class="text-secondary">From</dt>
            <dd class="flex items-center gap-2 font-medium">
              <%= render "accounts/logo", account: @transfer.from_account, size: "sm" %>
              <%= link_to @transfer.from_account.name, account_path(@transfer.from_account), data: { turbo_frame: "_top" } %>
            </dd>
          </dl>

          <dl class="flex items-center gap-2 justify-between">
            <dt class="text-secondary">Date</dt>
            <dd class="font-medium"><%= l(@transfer.outflow_transaction.entry.date, format: :long) %></dd>
          </dl>

          <dl class="flex items-center gap-2 justify-between">
            <dt class="text-secondary">Amount</dt>
            <dd class="font-medium text-red-500"><%= format_money @transfer.outflow_transaction.entry.amount_money * -1 %></dd>
          </dl>
        </div>

        <%= render "shared/ruler", classes: "my-2" %>

        <div class="space-y-3">
          <dl class="flex items-center gap-2 justify-between">
            <dt class="text-secondary">To</dt>
            <dd class="flex items-center gap-2 font-medium">
              <%= render "accounts/logo", account: @transfer.to_account, size: "sm" %>
              <%= link_to @transfer.to_account.name, account_path(@transfer.to_account), data: { turbo_frame: "_top" } %>
            </dd>
          </dl>

          <dl class="flex items-center gap-2 justify-between">
            <dt class="text-secondary">Date</dt>
            <dd class="font-medium"><%= l(@transfer.inflow_transaction.entry.date, format: :long) %></dd>
          </dl>

          <dl class="flex items-center gap-2 justify-between">
            <dt class="text-secondary">Amount</dt>
            <dd class="font-medium text-green-500">+<%= format_money @transfer.inflow_transaction.entry.amount_money * -1 %></dd>
          </dl>
        </div>
      </div>
    <% end %>

    <% dialog.with_section(title: t(".details")) do %>
      <%= styled_form_with model: @transfer,
              data: { controller: "auto-submit-form" }, class: "space-y-2" do |f| %>
        <% if @transfer.categorizable? %>
          <%= f.collection_select :category_id, @categories.alphabetically, :id, :name, { label: "Category", include_blank: "Uncategorized", selected: @transfer.outflow_transaction.category&.id }, "data-auto-submit-form-target": "auto" %>
        <% end %>

        <%= f.text_area :notes,
                  label: t(".note_label"),
                  placeholder: t(".note_placeholder"),
                  rows: 5,
                  "data-auto-submit-form-target": "auto" %>
      <% end %>
    <% end %>

    <% dialog.with_section(title: t(".settings")) do %>
      <div class="pb-4">
        <div class="flex items-center justify-between gap-2 p-3">
          <div class="text-sm space-y-1">
            <h4 class="text-primary"><%= t(".delete_title") %></h4>
            <p class="text-secondary"><%= t(".delete_subtitle") %></p>
          </div>

          <%= button_to t(".delete"),
                transfer_path(@transfer),
                method: :delete,
                class:  "rounded-lg px-3 py-2 whitespace-nowrap text-red-500 text-sm
                          font-medium border border-secondary",
                data:   { turbo_confirm: true, turbo_frame: "_top" } %>
        </div>
      </div>
    <% end %>
  <% end %>
<% end %>
